<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="100px" :rules="rules">
      <el-row>
        <el-col style="width: 250px">
          <el-form-item label="盘点单名称" prop="outboundName">
            <el-input v-model="form.outboundName"/>
          </el-form-item>
        </el-col>
        <el-col style="width: 250px">
          <el-form-item label="仓库" prop="warehouseCode">
            <el-select
              v-model="form.warehouseCode"
              placeholder="请选择仓库"
              clearable
            >
              <el-option
                v-for="w in warehouseList"
                :key="w.id"
                :label="w.warehouseName"
                :value="w.warehouseCode"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col style="width: 250px">
          <el-form-item label="盘点人" prop="employeeId">
            <el-select
              v-model="form.employeeId"
              placeholder="请选择盘点人"
              clearable
            >
              <el-option
                v-for="e in employeeList"
                :key="e.userId"
                :label="e.nickName"
                :value="e.userId"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-table :data="goodsList">
        <el-table-column label="商品名称" align="center" prop="goodsName" />
        <el-table-column label="商品规格" align="center" prop="specificationName" />
        <el-table-column label="成本价格" width="100" align="center" prop="oldPrice" />
        <el-table-column label="数量" align="center">
          <template slot-scope="scope">
            <input v-model="scope.row.num"/>
          </template>
        </el-table-column>
        <el-table-column label="金额" align="center">
          <template slot-scope="scope">
            {{ calculateCountPrice(scope) }}
          </template>
        </el-table-column>
        <!--      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">-->
        <!--        <template slot-scope="scope">-->
        <!--          <el-button-->
        <!--            size="mini"-->
        <!--            type="text"-->
        <!--            icon="el-icon-delete"-->
        <!--            @click="handleDelete(scope.$index)"-->
        <!--            v-if="scope.$index !== (goodsList.length - 1)"-->
        <!--          >删除</el-button>-->
        <!--        </template>-->
        <!--      </el-table-column>-->
      </el-table>
      <el-row>
        <el-col style="width: 80%">
        <el-form-item label="盘点单备注" prop="mark">
          <el-input v-model="form.mark"/>
        </el-form-item>
        </el-col>
        <el-col style="width: 200px">
          <p style="display: inline-block">总金额：</p>
          <el-input v-model="this.totalPrice" style="display: inline-block;width: 100px" ></el-input>
        </el-col>
      </el-row>
    </el-form>
    <el-button type="info" icon="el-icon-plus" v-if="this.$route.query.data !== '详情'" @click="addGoods()">添加商品</el-button>
    <el-form label-width="100px">
      <el-form-item style="text-align: center;margin-left:-120px;margin-top:30px;">
        <el-button type="primary" @click="submitForm()" v-if="this.$route.query.data !== '详情'">提交</el-button>
        <el-button @click="close()">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {getUserList, getWarehouseList} from "@/api/inventory/outbound";
import {addCheck,getCheck} from "@/api/inventory/check";

export default {
  name: "addCheck",
  data() {
    return {
      totalPrice: 0,
      form: {},
      warehouseList: [],
      employeeList: [],
      goodsList: [],
      rules: {
        outboundName: [
          {required: true, message: '盘点单名不能为空'}
        ],
        employeeId: [
          {required: true, message: '盘点人不能为空'}
        ],
        warehouseCode: [
          {required: true, message: '仓库不能为空'}
        ]
      },
    }
  },
  created() {
    this.getWarehouseList();
    this.getUserList();
    if (this.$route.query.id !== undefined) {
      getCheck(this.$route.query.id).then(response => {
        this.form = response.data;
        this.goodsList = response.data.goodsList;
      })
    }
  },
  watch: {
    '$route.query.getGoodsList'(newValue) {
      if (newValue) {
        this.goodsList = this.$route.query.getGoodsList;
        for (let i = 0; i < this.goodsList.length; i++) {
          this.goodsList[i].countPrice = 0;
        }
      }
    },
    'goodsList': {
      handler:function (newVal, oldVal) {
        // 在这里对 goodsList 进行处理
        // 您可以访问 newVal 和 oldVal 来获取新旧值
        // 处理逻辑...
        this.totalPrice = 0;
        let that=this;
        // console.log(JSON.stringify(newVal[0]) )
        // console.log(newVal[1].countPrice)
        setTimeout(function(){
          for (let i = 0; i < newVal.length; i++) {
            that.totalPrice = newVal[i].countPrice + that.totalPrice;
            console.log(that.totalPrice)
          }
        },10)
      },
      deep: true  // 深度侦听，用于监听对象内部属性的变化
    }
  },
  methods: {
    // 查询仓库列表
    getWarehouseList() {
      getWarehouseList().then(response => {
        this.warehouseList = response.data;
      })
    },
    // 出库人员列表
    getUserList() {
      getUserList().then(response => {
        this.employeeList = response.data;
      })
    },
    // 添加商品
    addGoods() {
      if (this.form.warehouseCode === undefined) {
        this.$modal.msgError("仓库不能为空");
        return;
      }
      this.$router.push({path: "/check/add/getGoods", query: {warehouseCode: this.form.warehouseCode}});
    },
    calculateCountPrice(scope) {
      if (scope.row.num  === undefined) {
        return 0;
      }
      // if (scope.$index === (this.goodsList.length - 1)) {
      //   let total = 0;
      //   for (let i = 0; i < this.goodsList.length; i++) {
      //     total = total + this.goodsList[i].countPrice;
      //   }
      //   return total;
      // }
      scope.row.countPrice = scope.row.oldPrice * scope.row.num;
      return scope.row.countPrice;
    },
    // 提交按钮
    submitForm() {
      if (this.goodsList.length === 0) {
        this.$modal.msgError("盘点表单数据不全,提交失败");
        return;
      }
      for (let i = 0; i < this.goodsList.length; i++) {
        if (this.goodsList[i].num === undefined) {
          this.$modal.msgError("盘点数量不能为空,提交失败");
          return;
        }
      }
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.outboundNum = 0;
          for (let i = 0; i < this.goodsList.length; i++) {
            this.form.outboundNum = this.goodsList[i].num + this.form.outboundNum;
          }
          this.form.goodsList = this.goodsList;
          addCheck(this.form).then(response => {
            this.close();
            location.href = "http://localhost/inventory/check";
          })
        }
      })
    },
    /** 关闭按钮 */
    close() {
      const obj = { path: "/inventory/check" };
      this.$tab.closeOpenPage(obj);
    },
  },
}
</script>

